<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="8">
                <el-form :model="processDefinition" ref="processDefinition" label-width="90px">
                    <el-form-item label="流程ID" prop="id">
                        <el-input v-model="processDefinition.id"
                                  readonly
                                  size="small"/>
                    </el-form-item>
                    <el-form-item label="流程名称" prop="name">
                        <el-input v-model="processDefinition.name"
                                  readonly
                                  size="small"/>
                    </el-form-item>
                    <el-form-item label="流程KEY" prop="key">
                        <el-input v-model="processDefinition.key"
                                  readonly
                                  size="small"/>
                    </el-form-item>
                    <el-form-item label="流程描述" prop="description">
                        <el-input v-model="processDefinition.description"
                                  readonly
                                  size="small"/>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="16">
                <div class="imgDiv">
                    <img alt="暂无图片" :src="imgUrl" style="vertical-align: middle;width: 700px;height: 300px;">
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-table v-loading="loading" border :data="userTaskList">
                <el-table-column label="序号" align="center" type="index" width="70"/>
                <el-table-column label="环节ID" align="center" prop="taskId" :show-overflow-tooltip="true"/>
                <el-table-column label="环节名称" align="center" prop="taskName" :show-overflow-tooltip="true"/>
                <el-table-column label="环节类型" align="center" prop="approvalType" :show-overflow-tooltip="true"/>
                <el-table-column label="审批人" align="center" prop="approvalUser" :show-overflow-tooltip="true"/>
                <el-table-column label="审批人姓名" align="center" prop="approvalUserName" :show-overflow-tooltip="true"/>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="handleApprovalUser(scope.$index,scope.row.approvalType)"
                                v-hasPermi="['store:modifyStore']"
                        >设置审批人
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row type="flex" justify="center" class="mt10">
            <el-button
                    type="primary"
                    icon="el-icon-plus"
                    @click="handleAddApprovar"
            >提交审批人
            </el-button>
            <el-button
                    type="warning"
                    icon="el-icon-edit"
                    @click="backListDefinition"
            >返回查询流程
            </el-button>
        </el-row>

        <!--查询用户对话框-->
        <el-dialog title="选择审批用户" :visible.sync="queryUserOpen" width="920px" append-to-body>
            <el-form :inline="true" :model="queryUserParams" ref="queryUserParams">
                <el-form-item label="用户姓名" prop="loginName">
                    <el-input
                            v-model="queryUserParams.loginName"
                            placeholder="请输入用户姓名"
                            clearable
                            size="small"
                    />
                </el-form-item>
                <el-form-item label="用户名" prop="userName">
                    <el-input
                            v-model="queryUserParams.userName"
                            placeholder="请输入用户名"
                            clearable
                            size="small"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="getUserList">查询</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetForm('queryUserParams')">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    border
                    :row-style="{height:0+'px'}"
                    :cell-style="{padding:0+'px'}"
                    :data="userList"
                    default-expand-all>
                <el-table-column label="用户名" align="center" prop="userName"/>
                <el-table-column label="用户姓名" align="center" prop="loginName"/>
                <el-table-column label="部门" align="center" prop="dept.deptName" :show-overflow-tooltip="true"/>
                <el-table-column label="岗位" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{formatPosts(scope.row.posts)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="角色" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{formatRoles(scope.row.roles)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="checkUser(scope.row)"
                        >选择
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                    v-show="userTotal>0"
                    :total="userTotal"
                    :page.sync="queryUserParams.pageNum"
                    :limit.sync="queryUserParams.pageSize"
                    @pagination="getUserList"
            />
            <el-form :inline="true" :model="checkUserInfo" ref="checkUserInfo" class="formClass">
                <el-form-item label="环节审批类型" prop="approvalType">
                    <el-input
                            v-model="checkUserInfo.approvalType"
                            readonly
                            size="small"
                    />
                </el-form-item>
                <el-form-item label="已选用户姓名" prop="approvalUserName">
                    <el-input
                            type="textarea"
                            v-model="checkUserInfo.approvalUserName"
                            placeholder="请选择用户"
                            readonly
                            size="small"
                    />
                </el-form-item>
                <el-form-item label="已选用户名" prop="approvalUser">
                    <el-input
                            type="textarea"
                            v-model="checkUserInfo.approvalUser"
                            placeholder="请选择用户"
                            readonly
                            size="small"
                    />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" icon="el-icon-plus" @click="submitCheckUser">确定选择</el-button>
                <el-button type="success" icon="el-icon-refresh" @click="clearUser">清除已选用户</el-button>
                <el-button icon="el-icon-back" @click="queryUserCancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {showProcessImgByPDId} from "@/api/process/general.js";
    import {listDefinition, listUserTask,addTaskApprovar} from "@/api/system/processUser.js";
    import {listCond} from "@/api/system/user";

    export default {
        name: "definitionUser",
        created() {
            this.processDefinition = this.$route.query;
            this.imgUrl = showProcessImgByPDId(this.processDefinition.id);
            this.getList();
        },
        data() {
            return {
                processDefinition: {
                    id: undefined,
                    name: undefined,
                    key: undefined,
                    deploymentId: undefined,
                    deploymentTime: undefined,
                    version: undefined,
                    description: undefined
                },
                imgUrl: "",
                // 遮罩层
                loading: true,
                // 申请单表格数据
                userTaskList: [],
                queryUserOpen: false,
                userList: [],
                queryUserParams: {
                    pageNum: 1,
                    pageSize: 10,
                    userName: undefined,
                    loginName: undefined
                },
                userTotal: 0,
                userTaskIndex: undefined,
                checkUserInfo: {
                    approvalType: "",
                    approvalUserName: "",
                    approvalUser: ""
                }
            };
        },
        watch: {
            '$route'(to, from) { //监听路由是否变化
                if (to.path == '/system/definitionUser') {
                    if (to.query.id != from.query.id) {
                        this.processDefinition = to.query;
                        this.imgUrl = showProcessImgByPDId(this.processDefinition.id);
                        this.getList();
                    }
                }
            }
        },
        methods: {
            /** 查询环节列表 */
            getList() {
                this.loading = true;
                let dataObj = {
                    processDefinitionId: this.processDefinition.id
                };
                listUserTask(dataObj).then(response => {
                    this.userTaskList = response.data;
                });
                this.loading = false;
            },
            backListDefinition(row) {
                //跳转到新增页面
                this.$router.push({path: "/system/listDefinition"});
            },
            handleAddApprovar() {
                let approvar = {
                    id: this.processDefinition.id,
                    key: this.processDefinition.key,
                    deploymentId: this.processDefinition.deploymentId,
                    approverInfoList: this.userTaskList,
                };
                addTaskApprovar(approvar).then(response => {
                    if (response.code === 200) {
                        this.msgSuccess("审批人设置成功！");
                    } else {
                        this.msgError(response.msg);
                    }
                });
            },
            handleApprovalUser(index, approvalType) {
                if (approvalType == "申请人处理") {
                    this.msgError("审批人处理无需设置审批人！");
                    return;
                } else {
                    this.queryUserOpen = true;
                    this.userTaskIndex = index;
                    this.checkUserInfo.approvalType = approvalType;
                }
            },
            getUserList() {
                listCond(this.queryUserParams).then(response => {
                        this.userList = response.rows;
                        this.userTotal = response.total;
                    }
                );
            },
            clearUser() {
                this.checkUserInfo.approvalUser = "";
                this.checkUserInfo.approvalUserName = "";
            },
            queryUserCancel() {
                this.checkUserInfo.approvalType = "";
                this.checkUserInfo.approvalUser = "";
                this.checkUserInfo.approvalUserName = "";
                this.queryUserOpen = false;
            },
            submitCheckUser(){
                this.userTaskList[this.userTaskIndex].approvalUser = this.checkUserInfo.approvalUser;
                this.userTaskList[this.userTaskIndex].approvalUserName = this.checkUserInfo.approvalUserName;
                this.checkUserInfo.approvalType = "";
                this.checkUserInfo.approvalUser = "";
                this.checkUserInfo.approvalUserName = "";
                this.queryUserOpen = false;
            },
            checkUser(row) {
                if (this.checkUserInfo.approvalType == "单人审批") {
                    this.checkUserInfo.approvalUser = row.userName;
                    this.checkUserInfo.approvalUserName = row.loginName;
                } else {
                    this.checkUserInfo.approvalUser = this.checkUserInfo.approvalUser + row.userName + ";";
                    this.checkUserInfo.approvalUserName = this.checkUserInfo.approvalUserName + row.loginName + ";";
                }
            },
            formatPosts(posts) {
                var postString = "";
                if (posts != null && posts != undefined && posts.length > 0) {
                    for (var i = 0; i < posts.length; i++) {
                        postString = postString + posts[i].postName;
                        if (i < posts.length - 1) {
                            postString = postString + ","
                        }
                    }
                }
                return postString;
            },
            formatRoles(roles) {
                var roleString = "";
                if (roles != null && roles != undefined && roles.length > 0) {
                    for (var i = 0; i < roles.length; i++) {
                        roleString = roleString + roles[i].roleName;
                        if (i < roles.length - 1) {
                            roleString = roleString + ","
                        }
                    }
                }
                return roleString;
            }
        }
    }
</script>

<style scoped>
    .imgDiv {
        text-align: center;
        border: 1px #C0C4CC solid;
        border-radius: 20px;
        height: 100%;
        margin-bottom: 20px;
    }

    .formClass {
        margin-top: 30px;
    }
</style>
